{extend name="../../admin/view/common/main"/}

{block name="style"}

{/block}
{block name="body"}
<div class="main-title">
    <h2>顶部导航</h2>
</div>

<div class="with-padding">
    <div class="">
        <a href="javascript:" class="btn btn-info add-new">新增导航</a>
    </div>
    <form action="{:url()}" method="post" class="form-horizontal">
        <ul class="channel-ul">
            {volist name="list" id="nav"}
            <li class="clearfix pLi">
                <input name="nav[sort][]" class="sort" type="hidden" value="{$nav.sort}">
                <div class="pull-left nav_list">
            
                    <select name="nav[type][]" class="form-control nav-type margin-right" style="width: 100px;">
                        {if $nav['type'] == '_custom'}
                        <option value="app">系统应用</option>
                        <option value="_custom" selected>自定义链接</option>
                        {else}
                        <option value="app" selected>系统应用</option>
                        <option value="_custom">自定义链接</option>
                        {/if}
                    </select>
            
                    <select name="nav[app][]" class="form-control module margin-right" style="width: 100px;{if $nav['type']=='_custom'}display:none{/if}">
                        {volist name="module_list" id="v"}
                        {if strtolower($nav['app']) == strtolower($v['name'])}
                        <option value="{$v.name}" selected>{$v.alias}</option>
                        {else}
                        <option value="{$v.name}" selected>{$v.alias}</option>
                        {/if}
                        {/volist}
                    </select>
                    <input name="nav[title][]" placeholder="请输入标题" class="form-control title margin-right" style="width: 100px;" value="{$nav.title}">
                    <input name="nav[url][]" placeholder="请输入链接" class="form-control url margin-right" style="width: 300px;{if $nav.type=='app'}display:none{/if}" value=" {$nav.url}">
                </div>
            
                <div class='pull-left new-blank margin-right'>
                    <input type="hidden" name="nav[target][]" class="target_input" value="{$nav.target}">
                    {if condition="$nav['target'] eq 1"}
                    <input type="checkbox" value="1" class="target" checked>
                    {else}
                    <input type="checkbox" value="1" class="target">
                    {/if}
                    <label class="target-blank">
                        新窗口
                    </label>
                </div>
            
                <div class='pull-right i-list'>
                    <a href="javascript:" title="添加一级导航" class="add-one">
                        <i class="fa fa-plus"></i>
                    </a>
                    <a href="javascript:"  title="移除此导航" class="remove-li">
                        <i class="fa fa-remove"></i>
                    </a>
                    <a href="javascript:" title="导航排序">
                        <i class="fa fa-arrows-alt sort-handle-1"></i>
                    </a>
                </div>
            </li>
            {/volist}
        </ul>
        <div class="form-item">
            <button class="btn btn-success submit-btn ajax-post no-refresh" id="submit" type="submit" target-form="form-horizontal">保 存</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</div>

<div id="one-nav" class="hide">
    <li class="clearfix pLi">
        <input name="nav[sort][]" class="sort" type="hidden" value="0">
        <div class="pull-left nav_list">
            <select name="nav[type][]" class="form-control nav-type margin-right" style="width: 100px;">
                <option value="app" >系统模块</option>
                <option value="_custom" >自定义链接</option>
            </select>

            <select name="nav[app][]" class="form-control module margin-right" style="width: 100px;">
                {volist name="module_list" id="v"}
                <option value="{$v.name}">{$v.alias}</option>
                {/volist}
            </select>
            <input name="nav[title][]" placeholder="请输入标题" class="form-control title margin-right" style="width: 100px;" value="{$module_list.0.alias}">
            <input name="nav[url][]" placeholder="请输入链接" class="form-control url margin-right" style="width: 300px;display:none" value="{$module_list.0.entry}">
        </div>

        <div class='pull-left new-blank'>
            <input type="hidden" name="nav[target][]" class="target_input" value="0">
            <input type="checkbox" value="1" class="target">
            <label class="target-blank">
                新窗口
            </label>
        </div>

        <div class='pull-right i-list'>
            <a href="javascript:" title="添加一级导航"  class="add-one">
                <i class="fa fa-plus"></i>
            </a>
            <a href="javascript:" title="移除此导航" class="remove-li">
                <i class="fa fa-remove"></i>
            </a>
            <a href="javascript:" title="导航排序">
                <i class="fa fa-arrows-alt sort-handle-1"></i>
            </a>
        </div>
    </li>
</div>


{/block}

{block name="script"}
    <script src="__STATIC__/common/lib/zui/lib/sortable/zui.sortable.min.js"></script>
    <script>

        ;(function($,window, undefined) {
            'use strict';

            var target_change = function(){
                $('.channel-ul').off('click').on('click','label.target-blank',function(event){
                    event.preventDefault();
                    if($(this).prev().prop('checked')){
                        $(this).prev().prop("checked",false);
                        $(this).closest('.new-blank').find('.target_input').val(0);
                    }else{
                        $(this).prev().prop("checked",true);
                        $(this).closest('.new-blank').find('.target_input').val(1);
                    }
                })
                /*
                $('.target').change(function(){
                    $(this).closest('.new-blank').find('.target_input').val($(this).prev().is(':checked')?1:0);
                })*/
            };

            var change_select = function () {
                $('.nav-type').unbind('change')
                $('.nav-type').change(function () {
                    var obj = $(this);
                    switch (obj.val()) {
                        case 'app':
                            obj.closest('li>div').children('select.module').show().change();
                            obj.closest('li>div').children('input.url').hide();
                            break;
                        case '_custom':
                            obj.closest('li>div').children('select.module').hide();
                            obj.closest('li>div').children('input.url').show();
                            obj.closest('li>div').children('input.title').val('');
                            obj.closest('li>div').children('input.url').val('');
                            break;
                    }
                })
            };

            var change_module = function () {
                $('.module').unbind('change')
                $('.module').change(function () {
                    var obj = $(this);
                    var text = obj.find("option:selected").text();
                    var value = obj.val();
                    obj.closest('li>div').children('input.title').val(text);
                    obj.closest('li>div').children('input.url').val(value);

                    obj.closest('li>div').next().children('select.chosen-icons').attr('data-value','icon-'+obj.find("option:selected").data('icon'));
                    re_bind()
                })

            };

            var add_new = function () {
                $('.add-new').unbind('click');
                $('.add-new').click(function () {
                    $('.channel-ul').append($('#one-nav').html());
                    fix_form()
                    re_bind()
                })
            };

            var add_one = function () {
                $('.add-one').unbind('click');
                $('.add-one').click(function () {
                    $(this).closest('.pLi').after($('#one-nav').html());
                    fix_form()
                    re_bind()
                })
            };

            var remove_li = function () {
                $('.remove-li').unbind('click');
                $('.remove-li').click(function () {
                    if( $(this).parents('form').find('.pLi').length > 1){
                        $(this).closest('li').remove()
                        re_bind()
                    }else{
                        toast.error('不能再减了~');
                    }

                })
            };

            var add_child = function () {
                $('.add-child').unbind('click');
                $('.add-child').click(function () {
                    if ($(this).closest('li').find('.ul-2').length == 0) {
                        $(this).closest('li').append('<div class="clearfix"></div><ul class="ul-2"  style="display: block;"></ul>')
                    }
                    $(this).closest('li').find('.ul-2').prepend($('#two-nav').html());
                    re_bind()
                })
            };

            var sort = function() {
                $('.channel-ul .pLi').each(function (index, element) {
                    $(this).attr('data-id', index);
                    $(this).find('.sort').val($(this).attr('data-order'));
                })
            }

            var fix_form = function () {
                $('.channel-ul').sortable({trigger: '.sort-handle-1', selector: 'li', dragCssClass: '',finish:function(){
                    re_bind()
                }
                });
                $('.channel-ul .ul-2').sortable({trigger: '.sort-handle-2', selector: 'li', dragCssClass: '',finish:function(){
                    re_bind()
                }});
            };

            //执行
            var re_bind = function(){
                change_select();
                change_module();
                add_new();
                add_one();
                remove_li();
                add_child();
                target_change();
                sort();
            };

            re_bind()
            fix_form();

        }(jQuery, window, undefined));

    </script>
{/block}